<!DOCTYPE html>
<html lang="en" style="width: 100%; height: 100%;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body style="width: 100%; height: 100%;margin: 0">
    <div style="width: 100%; height: 100%;margin: 0">
        <!-- 标题div -->
        <div style="border: 1px solid #999;width: calc(100% - 2px);height: calc(10% - 2px);">
            <div style="border: 1px solid #999;width: calc(30% - 2px);height: calc(70% - 2px);
            margin-left: 35%;margin-top: 3%;">房间号：1234
            </div>
        </div>

        <!-- 房间人数div -->
        <div style="border: 1px solid #999;width: calc(100% - 2px);height: calc(10% - 2px);">
            <!-- 房间人数div -->
            <div style="border: 1px solid #999;width: calc(60% - 2px);height: calc(100% - 2px);float: left;">
                房间人数/当前人数：10/7
            </div>
            <div style="border: 1px solid #999;width: calc(40% - 2px);height: calc(100% - 2px);float: left;">
                刷新
            </div>
        </div>

        <!-- 成员div websocket -->
        <div style="border: 1px solid #999;width: calc(100% - 2px);height: calc(65% - 2px);">
            <div style="border: 1px solid #999;width: calc(100% - 2px);height: calc(15% - 2px);">
                <div style="border: 1px solid #999;width: calc(20% - 2px);height: calc(100% - 2px);float: left;">张三</div>
                <div style="border: 1px solid #999;width: calc(20% - 2px);height: calc(100% - 2px);float: left;">李四</div>
                <div style="border: 1px solid #999;width: calc(20% - 2px);height: calc(100% - 2px);float: left;">王五</div>
                <div style="border: 1px solid #999;width: calc(20% - 2px);height: calc(100% - 2px);float: left;">赵六</div>
                <div style="border: 1px solid #999;width: calc(20% - 2px);height: calc(100% - 2px);float: left;">吴七</div>
            </div>
        </div>

        <!-- 按钮div -->
        <div style="border: 1px solid #999;width: calc(100% - 2px);height: calc(15% - 2px);">
            <!-- 开始游戏 -->
                <div style="border: 1px solid #999;width: calc(50% - 2px);height: calc(100% - 2px);float: left;">
                    <button>开始游戏</button>
                </div>
            <!-- 退出房间 -->
                <div style="border: 1px solid #999;width: calc(50% - 2px);height: calc(100% - 2px);float: left;">
                    <button>退出房间</button>
                </div>
        </div>
    </div>
</body>

</html>